<template>
	<view class="content">
		<cu-custom style="background-color: #fff;opacity: 1;" bgColor="bg-white" :isBack="true">
			<block slot="content">湖南省重点建设项目</block>
			<view slot="right" @tap="goShaixuan"><image src="../../static/icon/shaixuan.png" style="width: 15px;height: 17px;"></image></view>
		</cu-custom>

		<view class="projectHead">
			<view class="searchView">
				<view class="time uni-flex">
					<!-- <view class="timeText">2021</view> -->
					<view class="search_nf">
						<picker :range="years" value="5" @change="yearChange">
							{{ years[yearsIndex] }} 年
							<span class="r"></span>
						</picker>
					</view>
					<image class="shaixuanFont" src="../../static/icon/triangleFont.png"></image>
				</view>
				<input class="searchProj" type="text" placeholder="请输入项目名称" v-model="inputText" @confirm="confirm" />
				<view class="searchFont" @click="goSearch"><image src="../../static/icon/search.png"></image></view>
			</view>
		</view>
		<view class="uni-list item-wrap" style="display: block;">
			<!-- 如果为空，显示图片 -->
			<view class="noData" v-if="isShowNodata==true">
				<view class="imgBox"><image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image></view>
				<view class="textView"><view class="smallText" style="text-align: center;">没有数据哦~</view></view>
			</view>
			<view class="uni-list-cell" style="display: block;" v-else v-for="(item, index) in news" :key="index" :data-newsid="item.newsid">
				<!-- 父级 -->
				<view class="uni-media-list" v-if="item.linkId==null">
					<view class="uni-media-list-body">
						<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo" :data-projectId="item.projectId">
							<view class="uni-media-list-text-top titleText">{{ item.num }}. {{ item.title }}</view>
							<view class="uni-flex uni-ellipsis">
								<view class="infoText2">计划投资：{{ item.planInvestment }}亿元</view>
								<view class="infoText2">完成进度:{{ item.rate }}%</view>
							</view>
						</view>
						<view class="imgView uni-flex" v-if="item.photos.length != 0">
							<view class="imgBox" v-for="(imgItem, index) in item.photos" :key="index"><image :src="imgItem.fjdz" @click="previewImage(imgItem.fjdz)"></image></view>
						</view>
						<view class="btomFont">
							<view
								class="btomFont_one"
								:class="[item.isMonitor == 1 ? 'btomActive' : '']"
								@tap="goJk"
								:data-projectId="item.projectId"
								:data-isMonitor="item.isMonitor"
							>
								<image class="jiankongFont" v-if="item.isMonitor == 1" src="../../static/icon/icon-2.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon.png"></image>
								<view :class="{ btomActive: item.isMonitor == 1 }">监控</view>
							</view>
							<view
								class="btomFont_one"
								:class="{ btomActive: rSelect.indexOf(index) != -1 }"
								@click="focusOn(item, index)"
								:key="index"
								:data-projectId="item.projectId"
								:data-isCare="item.isCare"
							>
								<view class="jiankongFont jiankImg"></view>
								<!-- <image class="jiankongFont" :class="{btomActive:item.isCare==1}" v-else src="../../static/icon/icon-1.png"></image> -->
								<view>关注</view>
							</view>
							<!-- <view :class="{'ofnt': }" @tap="focusOn(index)">关注</view> -->
							<view
								class="btomFont_one"
								:class="[item.bw != '' && item.bw != null ? 'btomActive' : '']"
								@click="viewMap"
								:data-projectId="item.projectId"
								:data-bw="item.bw"
								:data-dj="item.dj"
							>
								<image class="jiankongFont" v-if="item.bw != '' && item.bw != null" src="../../static/icon/icon-5.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon-4.png"></image>
								<view>地图</view>
							</view>
							
						</view>
					</view>
				</view>
				<!-- 父级 -->
				<view class="uni-media-list" v-else>
					<view class="uni-media-list-body">
						<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo" :data-projectId="item.projectId">
							<view class="uni-media-list-text-top titleText">({{ item.nums }}). {{ item.title }}</view>
							<view class="uni-flex uni-ellipsis">
								<view class="infoText2">计划投资：{{ item.planInvestment }}亿元</view>
								<view class="infoText2">完成进度:{{ item.rate }}%</view>
							</view>
						</view>
						<view class="imgView uni-flex" v-if="item.photos.length != 0">
							<view class="imgBox" v-for="(imgItem, index) in item.photos" :key="index"><image :src="imgItem.fjdz" @click="previewImage(imgItem.fjdz)"></image></view>
						</view>
						<view class="btomFont">
							<view
								class="btomFont_one"
								:class="[item.isMonitor == 1 ? 'btomActive' : '']"
								@tap="goJk"
								:data-projectId="item.projectId"
								:data-isMonitor="item.isMonitor"
							>
								<image class="jiankongFont" v-if="item.isMonitor == 1" src="../../static/icon/icon-2.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon.png"></image>
								<view :class="{ btomActive: item.isMonitor == 1 }">监控</view>
							</view>
							<view
								class="btomFont_one"
								:class="{ btomActive: rSelect.indexOf(index) != -1 }"
								@click="focusOn(item, index)"
								:key="index"
								:data-projectId="item.projectId"
								:data-isCare="item.isCare"
							>
								<view class="jiankongFont jiankImg"></view>
								<!-- <image class="jiankongFont" :class="{btomActive:item.isCare==1}" v-else src="../../static/icon/icon-1.png"></image> -->
								<view>关注</view>
							</view>
							<!-- <view :class="{'ofnt': }" @tap="focusOn(index)">关注</view> -->
							<view
								class="btomFont_one"
								:class="[item.bw != '' && item.bw != null ? 'btomActive' : '']"
								@click="viewMap"
								:data-projectId="item.projectId"
								:data-bw="item.bw"
								:data-dj="item.dj"
							>
								<image class="jiankongFont" v-if="item.bw != '' && item.bw != null" src="../../static/icon/icon-5.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon-4.png"></image>
								<view>地图</view>
							</view>
							
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			btomActive: false,
			list: [],
			num: 0,
			nums: 0,
			news: [],
			years: [],
			yearsIndex: 0,
			inputText: '',
			total: 0,
			options: [],
			pageNo: 1,
			pageSize: 10,
			isCare: 0,
			rSelect: [],
			backData: [],
			buildPropertyId: '',
			industryId: '',
			proaddId: '',
			isShowNodata: false
		};
	},

	onLoad: function(options) {
		this.getYears();
		this.options = options;
		this.loading(options);
		//当前年份
		this.$http.get("/sys/v1/currentYear.do",{
			
		}).then(res=>{
			//console.log(res)
			this.year= res.data;
			let yearsIndex=0;
			yearsIndex = this.years.indexOf(this.year);
			this.yearsIndex = yearsIndex;
		})
		
	},
	onShow() {
		setTimeout(() => {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			}, 50);
		},

	onReachBottom() {
		let options = this.options;
		console.log(options);
		// console.log(this.news.length);
		// console.log(this.total);
		if(this.news.length<this.total){
			uni.showLoading({
				title:"加载中……"
			})
			this.pageNo+=1;
			this.loading(options);
			setTimeout(()=>{
				uni.hideLoading()
			},2000);
		}else{
				setTimeout(()=>{
					uni.showToast({
						title:"没有数据啦~",
						icon:"none"
					})
					uni.stopPullDownRefresh()
				},1000)
			}
	},
	methods: {
		upData: function(backData) {
			this.buildPropertyId = backData.jieduanId;
			this.proaddId = backData.guishuId;
			this.industryId = backData.lingyuId;
			var val=1;
			//this.pageNo=1;
			this.loading(backData,val);
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		//年份取后台
		getYears(){
			this.$http.get("/sys/v1/dict.do?code=year",{
				
			}).then(res=>{
				console.log(res);
				let years = res.data;
				for(var i=0;i<years.length;i++){
					let yearName = years[i].name;
					this.years.push(yearName);
				}
				console.log(this.years)
			})
		},
		loading(options,val) {
			if (val == 1) {
				this.num = 0;
				this.nums = 0;
			}
			this.options = options;
			let conditions = options.conditions;
			let projectName = options.projectName;
			let countryid = options.countryid;
			let cityid = options.cityid;
			let region = options.region;
			let urlConditions = '';
			console.log(conditions);
			if (conditions == 'kgyj') {
				urlConditions = 'kgtype=3';
			} else if (conditions == 'jgyj') {
				urlConditions = 'jgtype=3';
			} else if (conditions == 'jdyj') {
				urlConditions = 'isWcyjh=1';
			}
			let years = this.years;
			let yearsIndex = this.yearsIndex;
			let year = years[yearsIndex];
			console.log(this.proaddId);
			this.$http
				.get('/project/v1/list.do?' + urlConditions, {
					params: {
						year: year,
						projectName: projectName,
						buildPropertyId: this.buildPropertyId,
						proaddId: this.proaddId,
						industryId: this.industryId,
						pageNo: this.pageNo,
						isSzdxm: 1,
						cityid: cityid,
						region: region,
						countryid: countryid
					}
				})
				.then(data => {
					console.log(data);
					if (data.data.rows.length == 0) {
						this.isShowNodata = true;
					} else {
						this.isShowNodata = false;
						if (this.pageNo > 1) {
							if(this.buildPropertyId!=""||this.proaddId!=""||this.industryId!=""){
								this.pageNo = 1
							}
							let newsData = data.data.rows;
							var num = this.num
							var nums = this.nums;
							newsData = newsData.map(item => {
								if(item.linkId==null){
										  nums = 0
										  num = num + 1
										  this.num = num
									  } else {
										  nums = nums + 1
										  this.nums = nums
									  }
								return {
									projectId: item.projectId,
									title: item.projectName,
									isCare: item.isCare,
									isMonitor: item.isMonitor,
									planInvestment: item.planInvestment,
									photos: item.photos,
									rate: item.rate,
									bw: item.bw,
									dj: item.dj,
									pxh: item.pxh,
									linkId: item.linkId,
									nums:nums,
									num:num
								};
							});
							this.news = this.news.concat(newsData); // 合并新数据
							console.log(this.news);
							let arrDatas = [];
							for (var i = 0; i < this.news.length; i++) {
								if (this.news[i].isCare == 1) {
									arrDatas.push(i);
								}
							}
							this.rSelect = arrDatas;
							uni.hideLoading();
						} else {
							this.news = data.data.rows;
							this.total = data.data.total;
							var arrData = [];
							for (var i = 0; i < this.news.length; i++) {
								if (this.news[i].isCare == 1) {
									arrData.push(i);
								}
							}
							this.rSelect = arrData;
							 var num = this.num
							 var nums = this.nums
							this.news = this.news.map(item => {
								if(item.linkId==null){
										  nums = 0
										  num = num + 1
										  this.num = num
									  } else {
										  nums = nums + 1
										  this.nums = nums
									  }
								return {
									projectId: item.projectId,
									title: item.projectName,
									isCare: item.isCare,
									isMonitor: item.isMonitor,
									planInvestment: item.planInvestment,
									photos: item.photos,
									rate: item.rate,
									bw: item.bw,
									dj: item.dj,
									pxh: item.pxh,
									linkId: item.linkId,
									nums:nums,
									num:num
								};
							});
						}
					}
				});
		},
		confirm() {
			this.goSearch();
			uni.hideKeyboard();
		},
		goSearch() {
			//搜索查询
			let projectName = this.inputText;
			let options = { projectName: projectName };
			console.log(projectName);
			console.log(options.projectName);
			this.loading(options, 1);
		},

		//顶部导航筛选跳转
		goShaixuan() {
			uni.navigateTo({
				url: '/pages/xmjz/shaixuan'
			});
		},
		yearChange: function(e) {
			this.yearsIndex = e.detail.value;
			let options = this.options;
			var that = this;
			let val = 1;
			that.loading(options,val);
		},
		openinfo(e) {
			var projectId = e.currentTarget.dataset.projectId;
			console.log(projectId);
			uni.navigateTo({
				url: '/pages/xmjz/info?projectId=' + projectId
			});
		},

		goJk(e) {
			console.log(e);
			var projectId = e.currentTarget.dataset.projectId;
			var monitor = e.currentTarget.dataset.isMonitor;
			if (monitor > 0) {
				uni.navigateTo({
					url: './jklist?projectId=' + projectId
				});
			}
		},
		// 点心心关注
		focusOn(data, index) {
			//debugger;
			console.log(data);
			console.log(index);
			let projectId = data.projectId;
			let isCare = data.isCare;
			if (isCare == 0) {
				this.$http
					.get('/project/v1/addCare.do?projectId=' + projectId, {
						params: ''
					})
					.then(data => {
						console.log(data);
						if (data.data.code == 0) {
							uni.showToast({
								title: '您已经关注！',
								icon: 'none'
							});
							// let index;
							console.log(this.news[index]);
							if (this.news[index].newsid == projectId) {
								console.log(this.isCare[index]);
								this.news[index].isCare = 1;
							}
						}
					});
			} else {
				this.$http
					.get('/project/v1/deleteCare.do?projectId=' + projectId, {
						params: ''
					})
					.then(data => {
						console.log(data);
						if (data.data.code == 0) {
							uni.showToast({
								title: '您已取消关注！',
								icon: 'none'
							});
							if (this.news[index].newsid == projectId) {
								console.log(this.isCare[index]);
								this.news[index].isCare = 0;
							}
						}
					});
			}
			if (this.rSelect.indexOf(index) == -1) {
				console.log(index); //打印下标
				this.rSelect.push(index); //选中添加到数组里
			} else {
				this.rSelect.splice(this.rSelect.indexOf(index), 1); //取消
			}
		},

		//查看地图
		viewMap(e) {
			let bw = e.currentTarget.dataset.bw;
			let dj = e.currentTarget.dataset.dj;
			let id = e.currentTarget.dataset.projectId;
			if (bw != '' && bw != null) {
				uni.navigateTo({
					url: '/pages/map/maps?bw=' + bw + '&dj=' + dj + '&id=' + id
				});
			}
		},
		previewImage(imageUrl) {
			console.log(imageUrl);
			var images = [];
			images.push(imageUrl);
			console.log(images);
			// let photoList = imgItem.map(item=>{
			// 	return item.fjdz
			// });
			uni.previewImage({
				current: 0,
				urls: images,
				loop: true
			});
		}
	},
	watch: {
		num(val) {
			this.nums = 0;
		}
	}
};
</script>

<style scoped>
/*每个页面公共css */
@import 'uni.css';
@import 'xmjzIndex.css';
</style>
